<template>
	<div class="login" :style="{ height: isSmall ? '1000px' : '100vh' }">
		<div class="menu-lang" @click="changeLang" v-if="!isPc">{{ En ? '中文' : 'EN' }}</div>
		<div class="logo-text">{{ $t(langTitleKey) }}</div>
		<div class="login1 login2">
			<el-form>
				<el-input :placeholder="$t('login11')" class="login-input" v-model="phone">
					<template #prepend>
						<div class="prev">
							<span>+</span>
							<el-input v-model="phoneCnyCode"></el-input>
						</div>
					</template>
				</el-input>
			</el-form>
			<el-input v-model="yzm" :maxlength="6" :placeholder="$t('login7')">
				<div slot="suffix" class="code">
					<span v-if="showSeconds" @click.stop style="color: #000">{{ seconds }}s{{ En ? '' : '后重获' }}</span>
					<span v-else-if="!checkZc">{{ $t('login10') }}</span>
					<span v-else @click="Debounce(getSmsCode)" :class="phone ? 'active' : ''">{{ $t('login10') }}</span>
				</div>
			</el-input>
			<div class="login3" @click="checkZc = !checkZc">
				<span class="check" :class="checkZc ? 'checked' : ''"></span>
				{{ $t('login.index.357394-0') }}
				<span class="login3-1" @click.stop="() => $refs.gzZcRef.getGz()">{{ $t('login.index.357394-1') }}</span>
				{{ $t('login.index.357394-2') }}
				<span class="login3-1" @click.stop="$refs.gzZcRef.getGz('privacy_rule')">{{ $t('login.index.357394-3') }}</span>
			</div>
			<div class="btn disabled" v-if="!phone || !yzm || !checkZc || !phoneCnyCode">{{ $t("secdetail2") }}</div>
			<div class="btn" v-else @click="Debounce(yzmSubmit)">{{ $t("secdetail2") }}</div>
		</div>
		<pub-zc-gz ref="gzZcRef" @close="zcAgreeHandle" />
		<Dialog v-model="show">
			<div class="invite-mask">
				<img class="img" v-if="detail.step == 3" src="https://static.inclusionconf.com/static/images/new/invite-icon1.png" alt="">
				<img class="img" v-else-if="detail.step == 2" src="https://static.inclusionconf.com/static/images/new/invite-icon2.png" alt="">
				<img class="img" v-else-if="detail.step == 4" src="https://static.inclusionconf.com/static/images/new/invite-icon3.png" alt="">
				<img class="img" v-else src="https://static.inclusionconf.com/static/images/new/invite-icon4.png" alt="">
				<div class="invite-text" v-html="inviteText"></div>
				<div class="btns">
					<div class="btn" @click="show = false" v-if="detail.step == 3 || detail.step == 4">{{ $t('secdetail3') }}</div>
					<div class="btn active" @click="submit">{{ $t('secdetail2') }}</div>
				</div>
			</div>
		</Dialog>
	</div>
</template>

<script>
	import protal from "@/api/protal";
	import JSEncrypt from "../../../static/jsencrypt.min.js";
	import PubZcGz from '@/components/pub-zc-gz.vue'
	import Dialog from "./components/dialog.vue";
	// 邀请码 人员类型

	//普通观众 没有状态页面
	export default {
		components: {
			PubZcGz,
			Dialog
		},
		data() {
			return {
				show: false,
				checkZc: false,
				accountName: "",
				password: "",
				phone: "",
				phoneCnyCode: '86',
				hidePassword: false,
				isSmall: false,
				code: "",
				timestamp: "",
				encryptStr: "",
				codePic: "",
				loginTitle: "",
				loginTitleEn: "",
				yzm: "",
				showSeconds: false,
				seconds: 59,
				detail: {},
				inviteText: ``
			};
		},
		computed: {
			langTitleKey() {
				if (this.zd.person_type) {
					return this.zd.person_type.find(x => x.value == this.channelType)['label' + this.En]
				}
			},
			disabled() {
				return !this.accountName || !this.code || !this.password;
			},
			channelType() {
				return this.$route.query.channelType;
			},
			inviteCode() {
				return this.$route.query.inviteCode;
			},
		},
		created() {
			this.isSmall = document.documentElement.clientHeight < 800;
			this.getCodePic();
			this.loginTitle = uni.getStorageSync("loginTitle");
			this.loginTitleEn = uni.getStorageSync("loginTitleEn");
		},
		methods: {
			zcAgreeHandle(t) {
				this.checkZc = true
			},
			async getCodePic() {
				await this.getTimestamp();
				this.codePic = protal.timestamp(this.timestamp);
			},
			submit() {
				this.show = false

				if (this.detail.step == 2) {
					uni.setStorageSync('token', this.detail.loginRes.token)
					uni.setStorageSync('showWebcome', '1')
					this.$router.push('/')
				}
				if (this.detail.step == 3) {
					uni.setStorageSync('token', this.detail.loginRes.token)
					uni.setStorageSync('showWebcome', '1')
					protal.invitationconvert(this.inviteCode).then(res => {
						if (res.code == '0000') {
							uni.showToast({
								icon: 'success',
								title: this.En ? 'Success' : '身份转化成功！'
							})
							this.$router.push('/')
						}
					})
				}
				if (this.detail.step == 4) {
					uni.setStorageSync('token', this.detail.loginRes.token)
					uni.setStorageSync('showWebcome', '1')
					protal.invitationsignUpForum(this.inviteCode).then(res => {
						if (res.code == '0000') {
							uni.showToast({
								icon: 'success',
								title: this.En ? 'Success' : '操作成功！'
							})
							this.$router.push('/')
						}
					})
				}
				if (this.detail.step == 5) {
					uni.setStorageSync('token', this.detail.loginRes.token)
					uni.setStorageSync('showWebcome', '1')
					this.$router.push('/')
				}
			},
			yzmSubmit() { // 手机验证码登录
				const params = {
					"mobile": this.phone,
					"code": this.yzm,
					"inviteCode": this.inviteCode
				}
				this.jsAPI('waitanh5_logonClick')
				protal.invitationsubmit(params).then(res => {
					// step (integer, optional): 步骤：0 -> 无历史匹配信息 跳转实名认证 1 -> 有历史信息 取值 existHistoryRes 信息 跳转认证信息 2 -> 邀请码信息与已注册用户类型一致 取值 loginRes 点击弹框确认 跳转到特定页面 3 -> 身份转换 取值 loginRes 点击弹框确认调用身份转换接口 成功后跳转到特定页面 4 -> 论坛邀请 取值 loginRes 弹框提示论坛邀请信息 接受邀请 -> 调用绑定论坛接口, 接受与拒绝 都跳转到特定页面 5 -> 身份降级 取值 loginRes 提示已注册的用户类型 不能更换 被邀请的用户类型 点击弹框确认 跳转到特定页面
					if (res.code !== '0000') return
					const data = res.data
					if (data.step == 0) {
						this.$router.push({
							name: 'real',
							query: {
								phone: this.phone,
								phoneCnyCode: this.phoneCnyCode,
								authCode: data.existHistoryRes.authCode,
								inviteCode: this.inviteCode
							}
						})
					} else if (data.step == 1) {
						this.$router.push({
							name: 'history',
							query: {
								name: data.existHistoryRes.name,
								identityType: data.existHistoryRes.identityType,
								identityCard: data.existHistoryRes.identityCard,
								phone: this.phone,
								phoneCnyCode: this.phoneCnyCode,
								authCode: data.existHistoryRes.authCode,
								inviteCode: this.inviteCode
							}
						})
					} else if (data.step == 2) {
						this.detail = data
						this.inviteText = this.En ? `<p>You already have a <b>“${this.langTitleKey}”</b> Badge Type</p>` : `<p>您已拥有<b>“${this.langTitleKey}”</b>证件</p>`
						this.show = true
					} else if (data.step == 3) {
						this.detail = data
						this.inviteText = this.En ? `You already have a <b>“${this.zd.person_type.find(x => x.value == data.personType)['label' + this.En]}”</b> Badge Type. Would you like to change it to "${this.langTitleKey}" Badge Type?` : `<p>您已拥有<b>“${this.zd.person_type.find(x => x.value == data.personType)['label' + this.En]}”</b>证件，</p><p>是否变更为“${this.langTitleKey}”证件？</p>`
						this.show = true
					} else if (data.step == 4) {
						this.detail = data
						this.inviteText = this.En ? `Do you accept the invitation from "${data['forumName' + this.En]}" as an ${this.zd.person_type.find(x => x.value == data.personType)['label' + this.En]}?` : `<p>您是否接受来自${data['forumName' + this.En]}的</p><p><b>${this.zd.person_type.find(x => x.value == data.personType)['label' + this.En]}邀请？</b></p>`
						this.show = true
					} else if (data.step == 5) {
						this.detail = data
						this.inviteText = this.En ? `You already possess the "${this.zd.person_type.find(x => x.value == data.personType)['label' + this.En]}" QR code badge and cannot change it.` : `<p>您已拥有<b>“${this.zd.person_type.find(x => x.value == data.personType)['label' + this.En]}”</b>证件，</p><p>不可更换此证件</p>`
						this.show = true
					}
				})
			},
			desSeconds() {
				this.showSeconds = true;
				const timer = setInterval(() => {
					if (this.seconds === 1) {
						this.showSeconds = false;
						clearInterval(timer);
						this.seconds = 59;
					}
					this.seconds -= 1;
				}, 1000);
			},
			async getSmsCode() {
				if (!this.phone) return
				await this.getTimestamp()
				this.getCrypt()
				const params = {
					mobile: this.phone,
					phoneCnyCode: this.phoneCnyCode,
					encryptionMsg: this.encryptStr,
					sendType: 'register'
				}
				protal.getSmsCode(params).then(res => {
					if (res.code === '0000') {
						this.desSeconds()
					}
				}).catch(err => {})
			},
			getTimestamp() {
				return protal.getTimestamp().then((res) => {
					if (res.code === "0000") {
						this.timestamp = res.data;
					}
				});
			},
			getCryptAccount() {
				var str = this.password;
				// 公钥
				var publicKey =
					"MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCCyuMRsaJXsRs/IhUBsQeVU87qpa/ndLmSE0zkEq48K7ADmk/5jlwpP/FLXNn6xCexGOp1MOeSEmOEa6OrLrxS3UI+U8e/dJNoj+QAe2fQPMi73mZQv497P0Q2WaVeW6PSkuaTRSMDJCN2S8c/y+Y+5VmaX6uNOA48uSI/WpXAzwIDAQAB";
				// 加密
				var encrypt = new JSEncrypt();
				encrypt.setPublicKey(publicKey);
				var encryptStr = encrypt.encrypt(str);
				this.encryptStr = encryptStr;
			},
			getCrypt() {
				var str = this.phone + "&#&" + this.timestamp;
				// 公钥
				var publicKey =
					"MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCCyuMRsaJXsRs/IhUBsQeVU87qpa/ndLmSE0zkEq48K7ADmk/5jlwpP/FLXNn6xCexGOp1MOeSEmOEa6OrLrxS3UI+U8e/dJNoj+QAe2fQPMi73mZQv497P0Q2WaVeW6PSkuaTRSMDJCN2S8c/y+Y+5VmaX6uNOA48uSI/WpXAzwIDAQAB";
				// 加密
				var encrypt = new JSEncrypt();
				encrypt.setPublicKey(publicKey);
				var encryptStr = encrypt.encrypt(str);
				this.encryptStr = encryptStr;
				console.log(str, this.encryptStr, 111);
			},
		},
	};
</script>

<style lang="less" scoped>
	.login {
		background: url(https://static.inclusionconf.com/static/images/new/invite-bg.png) no-repeat;
		background-size: 100% auto;
		background-color: #19234B;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 5.6rem;

		.logo {
			width: 2.68rem;
		}

		.logo-text {
			font-family: AlibabaPuHuiTi_3_85_Bold;
			font-size: 0.5rem;
			color: #ffffff;
			line-height: 1;
			text-align: center;
			font-style: normal;
			text-transform: uppercase;
			margin: 0 0 0.6rem;
		}

		.login1 {
			width: 6.5rem;
			position: relative;

			.lang {
				position: absolute;
				right: 0;
				top: 0;
				width: 1rem;
				height: 1rem;
				font-family: AlibabaPuHuiTi_3_65_Medium;
				font-size: 0.28rem;
				color: #1650ff;
				line-height: 0.4rem;
				text-align: left;
				font-style: normal;
				cursor: pointer;
				display: flex;
				padding-left: 0.55rem;
				padding-top: 0.12rem;
				font-weight: bold;
			}

			h2 {
				font-family: AlibabaPuHuiTi_2_75_SemiBold;
				font-size: 0.4rem;
				color: #000000;
				line-height: 1;
				text-align: left;
				font-style: normal;
				text-align: center;
				margin-bottom: 0.68rem;
			}

			.btn {
				cursor: pointer;
				width: 100%;
				height: 0.88rem;
				background: rgba(123, 74, 237, 1);
				border-radius: 0.12rem;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: AlibabaPuHuiTi_2_75_SemiBold;
				font-size: 0.3rem;
				color: #ffffff;
				line-height: 1;
				text-align: center;
				font-style: normal;
				margin-top: 0.4rem !important;

				&.disabled {
					background: rgba(123, 74, 237, 0.48);
				}
			}

			/deep/ .el-input {

				.el-input__inner {
					font-size: 0.3rem;
					height: 0.88rem;
					padding-left: 0.24rem;
					background: none;
					border-color: #fff;
					color: #fff;
					border-radius: 6px;
				}

				.el-input__suffix {
					right: 0.06rem;
				}
			}

			.open {
				width: 52px;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				transform: translateX(5px);

				img {
					width: 20px;
					height: 20px;
				}
			}

			.yszc {
				font-size: 0;

				.el-checkbox__label {
					padding-left: 6px !important;
				}

				span {
					font-size: 0.2rem;
				}

				/deep/ .el-checkbox__inner {
					border-radius: 50% !important;
				}

				#ys-c {
					font-family: AlibabaPuHuiTi_3_45_Light;
					font-size: 0.2rem;
					color: #181818;
				}

				.zc,
				.ys {
					font-size: 0.2rem;
					font-family: AlibabaPuHuiTi_3_45_Light;
					color: rgba(22, 80, 255, 1);
				}
			}

			.yzm {
				padding: 2px;
				height: 40px;
				cursor: pointer;

				img {
					width: auto;
					height: 100%;
				}
			}
		}

		.login2 {
			height: fit-content;
			padding-bottom: 0.72rem;

			.btn {
				margin-top: 18px;
			}

			.login2-text {
				font-family: AlibabaPuHuiTi_2_75_SemiBold;
				font-size: 0.24rem;
				color: #999999;
				line-height: 1;
				text-align: center;
				font-style: normal;
				position: absolute;
				left: 0;
				bottom: 0.4rem;
				width: 100%;
				padding: 0 0.48rem;
			}

			.code {
				display: flex;
				align-items: center;
				height: 100%;

				span {
					width: 1.88rem;
					height: 0.76rem;
					background: #ebebeb;
					border-radius: 6px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: AlibabaPuHuiTi_2_55_Regular;
					font-size: 0.26rem;
					color: #999999;
					line-height: 1;
					text-align: left;
					font-style: normal;
					cursor: not-allowed;

					&.active {
						background: #784DFF;
						color: #fff;
						cursor: pointer;
					}
				}
			}
		}
	}

	.login-input {
		width: 100%;
		margin: 0 auto 14px;
		display: flex;
		align-items: center;
		height: 44px;
		border-radius: 6px;
		border: 1px solid #fff;
		overflow: hidden;

		&>.el-input__inner {
			flex: 1;
			color: #fff;
		}

		/deep/ .el-input__inner {
			border: none !important;
			font-family: AppleSystemUIFont;
			font-size: 15px;
			color: #fff;
			line-height: 20px;
			text-align: left;
			font-style: normal;
		}

		/deep/ .el-input-group__prepend {
			display: inline-flex;
			flex: 0 0 54px;
			border: none !important;
			background: none;
			padding-left: 12px;
			position: relative;
			padding-right: 4px;

			.prev {
				display: flex;
				align-items: center;

				.el-input__inner {
					font-family: AlibabaPuHuiTi_3_45_Light !important;
					font-size: 15px !important;
					color: #fff;
					line-height: 20px !important;
					padding-left: 0;
					text-align: left;
					font-style: normal;
				}
			}

			span {
				font-family: AppleSystemUIFont;
				font-size: 15px;
				color: #fff;
				line-height: 20px;
				text-align: left;
				font-style: normal;
			}

			.el-input__inner {
				padding: 0;
				font-size: 15px;
				color: #fff;
				line-height: 20px;
				background: none;
			}

			&::after {
				content: "";
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 1px;
				height: 16px;
				background: #E3E3E3;
			}
		}

		/deep/ .el-input-group__append {
			padding: 0;
			flex: 0 0 94px;
			height: 38px;
			border-radius: 19px;
			transform: translateX(-3px);
			display: inline-flex;
			justify-content: center;
			align-items: center;
			border: none;

			.append {
				font-family: AppleSystemUIFont;
				font-size: 13px;
				line-height: 15px;
				text-align: center;
				font-style: normal;
				width: 100%;
				height: 100%;

				span {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 19px;
					background: #EBEBEB;
					color: #999999;

					&.active {
						background: #19234B;
						color: #fff;
						cursor: pointer;
					}
				}
			}
		}
	}

	.login3 {
		width: 100%;
		margin: 20px auto 40px;
		font-family: AlibabaPuHuiTi_3_45_Light;
		font-size: 12px;
		color: #FFFFFF;
		line-height: 19px;
		text-align: left;
		font-style: normal;

		.check {
			width: 14px;
			height: 14px;
			border-radius: 50%;
			border: 1px solid rgba(255, 255, 255, 0.71);
			display: inline-block;
			transform: translateY(2px);
			position: relative;
			z-index: 1;

			&::before {
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				width: 200%;
				height: 20px;
			}

			&.checked {
				border-color: #96B9FF;
				background: #96B9FF;
				position: relative;

				&::after {
					content: "";
					box-sizing: content-box;
					border: 1px solid #FFF;
					border-left: 0;
					border-top: 0;
					height: 7px;
					left: 4px;
					position: absolute;
					top: 1px;
					transform: rotate(45deg);
					width: 3px;
					transition: -webkit-transform .15s ease-in .05s;
					transition: transform .15s ease-in .05s;
					transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s;
					transform-origin: center;
				}
			}
		}

		.login3-1 {
			color: #96B9FF;
		}
	}

	.invite-mask {
		width: 5.8rem;
		padding-top: 20px;
		padding-bottom: 30px;
		position: relative;

		.img {
			width: 1.25rem;
			height: 1.25rem;
			margin: 0 auto 15px;
		}

		/deep/ p {
			font-family: AlibabaPuHuiTi_3_45_Light;
			font-size: 13px;
			color: #000;
			line-height: 19px;
			text-align: center;
		}

		.btns {
			display: flex;
			justify-content: center;
			position: absolute;
			left: 0;
			right: 0;
			bottom: -1.2rem;

			.btn {
				width: 2.54rem;
				height: .7rem;
				opacity: 1;
				background: rgba(222, 222, 222, 1);
				display: inline-flex;
				align-items: center;
				justify-content: center;
				font-family: AlibabaPuHuiTi_3_45_Light;
				font-size: 13px;
				color: rgba(97, 97, 97, 1);
				line-height: 1;
				border-radius: 6px;
				margin-right: 0.72rem;

				&.active {
					background: rgba(121, 72, 234, 1);
					color: #fff;
					margin-right: 0;
				}
			}
		}

		.invite-text {
			font-size: 13px;
			line-height: 18px;
			padding: 0 12px;
		}
	}

	.menu-lang {
		position: absolute;
		right: 18px;
		top: 16px;
		font-size: 20px;
		color: #fff;
		line-height: 1;
		font-family: inClusionFont;
	}

	.login-top {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 24px;
	}
</style>